<template>
	<div class="bear-LineChart">
		<SizeObserver
				class="bear-container"
				@bear-resize="$_bear_resizeFn">
			<div ref="chart" class="bear-chart"></div>
		</SizeObserver>
	</div>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils echarts */
	/**
	 * @author 唐国雄
	 * 折线图
	 * 属性----------------------
	 * :renderer		渲染方式,'svg','canvas'
	 * :name-attr		名称字段
	 * :value-attr		值字段
	 * :stack-attr		堆叠字段
	 * :main-color		颜色序列
	 * :tick-gap		刻度间距
	 * :formatter		格式化器,(<String>)=>{return <String>;}
	 * :extend-tipper	扩展提示生成器,(cur,all)=>{return [{name:<String>,value:<String>},...]}
	 * :data			数据,[{name:<String>,value:[<Number>,...],stack:<String>},...]
	 * :x-axis			x轴分类名,[<String>,...]
	 * :x-percent		单个系列横向的百分占比名称
	 * :y-percent		系列间纵向的百分占比名称
	 * :axis-name		纵轴名称
	 * :axis-formatter	纵轴刻度格式化器,(<String>)=>{return <String>;}
	 * :min-interval	纵轴最小间隔
	 * :font-size		报表字体大小
	 * :data-zoom		是否启用缩放组件
	 * 事件----------------------
	 * @click-chart		点击报表
	 * 方法----------------------
	 * loadChart()		重加载报表
	 * resetOption()	重设选项
	 */
	import './chart/chart.scss';
	import {chartMixin,yAxisChartMixin} from './chart/chart';
	export default{
		name:'LineChart',
		mixins:[chartMixin,yAxisChartMixin],
		props:{
			mainColor:{
				type:Array,
				default(){
					return [
						'#4cd435',
						'#f87676',
						'#519bf7',
						'#b9aefc',
						'#ebe53a'
					];
				}
			},
			tickGap:{
				type:Number,
				default:50
			}
		},
		computed:{
			$_bear_resetOptionListener(){
				return [this.mainColor,this.tipFormatterFn,this.mainColor,this.xAxis,this.axisName,this.axisFormatter,this.minInterval,this.fontSize,this.dataZoom,this.tickGap];
			},
			$_bear_loadChartListener(){
				return [this.nameAttr,this.valueAttr,this.stackAttr];
			}
		},
		created(){
			this.redundance=this.fontSize+10+10+5;
		},
		methods:{
			// 重加载报表
			$_bear_loadChart(){
				this.oldChartData={};
				this.oldChartData.series=this.$_bear_series(function(ele){
					ele.type='line';
					ele.symbol='path://M0,0a7 7 0 0 0 14 0a7 7 0 0 0 -14 0zM1,0a6 6 0 0 1 12 0a6 6 0 0 1 -12 0zM3,0a4 4 0 0 0 8 0a4 4 0 0 0 -8 0';
					ele.symbolSize=12;
					return ele;
				});
				this.resetOption();
			},
			// 重设选项
			$_bear_resetOption(){
				const fontSize=this.fontSize;
				const maxValueSpan=Math.max(
					Math.floor(this.lastWidth/this.tickGap)-1,
					0
				);
				const option={
					color:this.mainColor,
					legend:{
						top:0,
						right:0,
						itemHeight:Math.floor(fontSize*1.2),
						textStyle:{
							color:'#000',
							fontSize:fontSize,
							// fontWeight:'bold',
							lineHeight:fontSize+10
						}
					},
					tooltip:{
						trigger:'axis',
						axisPointer:{
							type:'shadow'
						},
						appendToBody:true,
						position:this.$_bear_tipPositionFn,
						formatter:this.tipFormatterFn
					},
					grid:{left:0,right:0,top:fontSize+10+10,bottom:5,containLabel:true},
					xAxis:{
						type:'category',
						data:this.xAxis,
						axisTick:{
							alignWithLabel:true
						},
						axisLabel:{
							interval:0,
							// fontWeight:'bold',
							fontSize:fontSize
						}
					},
					yAxis:{
						name:this.axisName,
						nameTextStyle:{
							fontSize:fontSize,
							fontWeight:'bold',
							lineHeight:fontSize+10
						},
						nameGap:10,
						boundaryGap:['15%','15%'],
						min:0,
						splitNumber:this.splitNumber,
						minInterval:this.minInterval,
						axisLine:{
							symbol:['none','arrow'],
							symbolOffset:10
						},
						axisLabel:{
							formatter:this.axisFormatter||this.formatter,
							showMinLabel:false,
							showMaxLabel:false,
							fontSize:fontSize
						},
						splitLine:{
							lineStyle:{
								type:'dashed'
							}
						}
					},
					series:this.oldChartData.series
				};
				if(this.dataZoom){
					option.dataZoom=[
						{
							type:'slider',
							labelFormatter:'',
							filterMode:'none',
							minValueSpan:1,
							maxValueSpan:maxValueSpan,
							height:26,
							bottom:0
						},
						{type:'inside'}
					];
				}
				this.chart.setOption(option,true);
			}
		}
	};
</script>

<style lang="scss">
	.bear-LineChart{
		>.bear-container{
			position:relative;
			width:100%;
			height:100%;
			>.bear-chart{
				width:100%;
				height:100%;
			}
		}
	}
</style>
